import clsx from 'clsx'
import type { ReactNode } from 'react'

type CardProps = {
  title?: ReactNode
  description?: ReactNode
  actions?: ReactNode
  padding?: 'sm' | 'md' | 'lg'
  className?: string
  children: ReactNode
}

const paddingMap = {
  sm: 'p-4',
  md: 'p-6',
  lg: 'p-8',
}

export const Card = ({ title, description, actions, padding = 'md', className, children }: CardProps) => {
  return (
    <section
      className={clsx(
        'surface-card liquid-card card-glow will-change-transform transition-transform duration-300 ease-out hover:-translate-y-0.5 hover:shadow-card overflow-visible',
        paddingMap[padding],
        className,
      )}
    >
      {(title || actions) && (
        <header className="mb-5 flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
          <div>
            {typeof title === 'string' ? (
              <h2 className="text-base font-semibold text-slate-900">{title}</h2>
            ) : (
              title
            )}
            {description ? (
              <p className="mt-1 text-sm text-slate-500">{description}</p>
            ) : null}
          </div>
          {actions ? <div className="flex flex-wrap gap-2">{actions}</div> : null}
        </header>
      )}
      <div className={clsx(title || actions ? '' : '', 'space-y-4')}>{children}</div>
    </section>
  )
}

export default Card
